<template>
	<view class="comment">
		<view class="commentList">
			<view class="comtxt_item" v-for="(comment, index) in comment" :key="comment.id">
				<view class="commentcontent same">
					<text class="userName">{{comment.userName}} : </text>
					<text class="newsTitle">{{comment.content}}</text>
				</view>
				<view class="commentDate ">
					<text class="time">{{comment.createTime}}</text>
					<view class="likeNum" @click='clickping(comment)'>
						<u-icon name="thumb-up" size="22" v-if="!comment.myLikeState"></u-icon>
						<u-icon name="thumb-up-fill" size="22" v-else></u-icon>
						<text>{{comment.likeNum}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 发表评论 -->
		<view class="send">
			<up-input placeholder="请评论输入内容" v-model="ptvalue"></up-input>
			<button class="mini-btn" type="warn" size="mini" style="padding: 4px 12px;margin-left:4px;"
				@click="sendping">评论</button>
		</view>
	</view>
</template>

<script>
	import {
		commentList
	} from '../../../api/library'
	import {
		baseurl
	} from '../../../api/request';
	import libraryData from "@/common/librarydata.js";
	export default {
		data() {
			return {
				comment: [],
				ptvalue: ""
			}
		},
		onLoad(options) {
			const libraryId = Number(options.id); // 从URL中获取id参数 
			this.getLibraryDetail(libraryId)
		},
		methods: {
			async getLibraryDetail(libraryId) {
				console.log(libraryId);
				let res = await commentList(libraryId)
				// console.log(res);
				if (res.code == 200) {
					this.comment = res.data.map(item => ({
						id: item.id,
						content: item.content,
						createTime: item.createTime,
						userId: item.userId,
						myLikeState: item.myLikeState,
						libraryId: item.libraryId,
						userName: item.userName
					}));
				} else {
					this.comment = libraryData.commentList.data.map(item => ({
						id: item.id,
						content: item.content,
						createTime: item.createTime,
						userId: item.userId,
						myLikeState: item.myLikeState,
						libraryId: item.libraryId,
						userName: item.userName
					}));
					console.log(this.comment);
				}
			},
			clickping(comment) {
				comment.myLikeState = !comment.myLikeState;
			},
			//发送评论
			async sendping() {
				console.log(this.ptvalue);
				if (this.ptvalue == null) {
					uni.showToast({
						title: '内容不能为空',
						icon: "error"
					})
					return;
				}
				let last = {
					id: this.comment.length + 1,
					img: 'http://cms-bucket.nosdn.127.net/4d0b78246cb74c319a96f8ed69d18a3020161216105916.jpg',
					content: this.ptvalue,
					createTime: this.getNewdate(),
					myLikeState: false,
					userName: "十四",
				}
				console.log(last);
				this.comment.push(last)
				this.ptvalue =""
				uni.showToast({
					title: '评论成功',
				})
			},
			//获取当前时间
			getNewdate() {
				let date = new Date()
				let year = date.getFullYear()
				let mon = date.getMonth() + 1
				let day = date.getDate()
				let hou = date.getHours()
				let min = date.getMinutes()
				let str = '-'
				return year + str + mon + str + day + ' ' + hou + ':' + min
			}
		}
	}
</script>

<style lang="scss">
	.same {
		margin: 8px 0px;
	}

	.imgs {
		width: 100%;
	}

	.title {
		font-size: 18px;
		font-weight: 700;
		margin: 14px 0px;
	}

	.comment {

		.send {
			display: flex;
			align-items: center;
			padding: 10px;
		}

		.comtxt_item {
			display: flex;
			flex-direction: column;
			padding: 4px 10px;

			.commentcontent {

				.userName {
					font-size: 16px;
					font-weight: 700;
					margin-right: 8px;
				}
			}

			.commentDate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #8b8b8b;

				.likeNum {
					display: flex;
					align-items: center;
				}
			}
		}

		.uni-pagination {
			padding: 2px 0px;
		}
	}

	.commentList {
		margin-bottom: 10px;
	}
</style>